/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Dimensions,
    Image,
    TouchableOpacity
} from 'react-native'
import Table from './Table';
import Register from './register/index';
import Order from './Order';
import CashDrawer from './CashDrawer';
import AddTable from './AddTable';
import {TabView} from 'react-native-tab-view';
import {scaleSize,deviceHeight, deviceWidth} from '../../utils/screen';
import FontText from '../components/FontText';
import StoreMenu from '../components/StoreMenu';
import {i18n} from '../../i18n/index';
import {createStackNavigator} from 'react-navigation';
let TableMenu = new createStackNavigator({
    table:Table,
    addtable:AddTable
},{
    initialRouteName:"table",
    navigationOptions:{
        header:null
    }
})
const mroutes = [
    { key: 'table', title: i18n.t("store.index.table"),defaultIcon:require("../../access/imgs/table_f.png"),activeIcon:require("../../access/imgs/table_a.png")},
    { key: 'register', title: i18n.t("store.index.register"),defaultIcon:require("../../access/imgs/register_f.png"),activeIcon:require("../../access/imgs/register_a.png")},
    { key: 'order', title: i18n.t("store.index.order"),defaultIcon:require("../../access/imgs/order_f.png"),activeIcon:require("../../access/imgs/order_a.png"),imgStyle:{width:scaleSize(28),height:scaleSize(37)}},
    { key: 'cash', title: i18n.t("store.index.cashdrawer"),defaultIcon:require("../../access/imgs/cashdrawer_f.png"),activeIcon:require("../../access/imgs/cashdrawer_a.png"),imgStyle:{width:scaleSize(33),height:scaleSize(30)}},

];
export default class Store extends Component {
  constructor(props){
      super(props);
      this.state = {
        index:props.navigation.getParam("index",1),
        routes:mroutes,
        rendered:false
    }
  }
  componentWillMount(){
    setTimeout(() => {
        this.setState({
            rendered:true
        })
    });
  }
  render() {
    let {index} = this.state;
    return (
        <View style = {{flex:1}}>
            <View style = {styles.content}>
                <TabView
                    navigationState={this.state}
                    renderScene={(e,index)=>this.renderScene(e,index)}
                    lazy = {true}
                    renderTabBar = {(e)=>{
                        let {navigationState,jumpTo} = e;
                        return (
                            <View style = {styles.navBar}>
                            <View style = {styles.storeView}>
                                <TouchableOpacity
                                    activeOpacity = {0.8}
                                    onPress = {()=>this.props.navigation.goBack()}
                                    >
                                    <Image source = {require("../../access/imgs/home.png")} style = {styles.storeLogo} />
                                </TouchableOpacity>
                                <FontText style = {styles.storeName} numerOfLines =  {1} font={'book'} >Store Name</FontText>
                            </View>
                            <View style = {styles.menuBox}>
                                {
                                    navigationState.routes.map((item,itemindex)=>{
                                        return (
                                            <StoreMenu
                                                key = {`eval_${itemindex}`} 
                                                text = {item.title}
                                                isActive = {index == itemindex}
                                                onPress = {()=>{
                                                    jumpTo(item.key)
                                                }}
                                                defaultIcon = {item.defaultIcon}
                                                activeIcon = {item.activeIcon}
                                                imgStyle = {item.imgStyle}
                                            />
                                        )
                                    })
                                }
                            </View>
                            <View style = {styles.userBox}>
                                <View style = {styles.userIcon}>
                                    <Image source = {require("../../access/imgs/table_user.png")} style = {{width:scaleSize(25),height:scaleSize(24)}} />
                                    <FontText style = {styles.userName} font={'book'} >hi, Chien!</FontText>
                                </View>
                                <TouchableOpacity 
                                    activeOpacity = {0.8}
                                    onPress = {()=>this.onLogoutPress()}
                                    style = {styles.logoutBox}>
                                    <View style = {{alignItems:"flex-end"}}>
                                        <FontText font={"light"} style = {styles.onlineText}>Online Since:</FontText>
                                        <FontText font={"light"} style = {styles.onlineText}>09:03PM 08/10/2018</FontText>
                                    </View>
                                    <Image style = {styles.logoutIcon} source = {require("../../access/imgs/exit.png")} />
                                </TouchableOpacity>
                            </View>
                        </View>
                        )
                    }}
                    onIndexChange={(index) => this.onChange(index)}
                    initialLayout={{ width: deviceWidth,height:deviceHeight }}
                    tabBarPosition="top"
                    style = {{flex:1}}
                />
            </View>
        </View>
    );
  }
  onChange(index){
    this.setState({ index:index });
  }
  onLogoutPress(){
    console.log("onLogoutPress")
  }
  renderScene(e){
    let {index,rendered} = this.state;
    let key = e.route.key;
    //加快第一次渲染速度
    if(!rendered && key != mroutes[index].key){
        return null;
    }
    switch (key) {
        case "table":
            return <TableMenu />
        break;
        case "register":
            return <Register />
        break;
        case "order":
            return <Order />
        break;
        case "cash":
            return <CashDrawer />
        break;
        default:
            break;
    }
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
    flex:1,
    backgroundColor: "blue",
  },
  navBar:{
    height:scaleSize(80),
    backgroundColor: "#151c2e",
    flexDirection: 'row',
  },
  storeView:{
    width:scaleSize(400),
    flexDirection: 'row',
    alignItems: 'center',
    height:scaleSize(80),
    paddingHorizontal: scaleSize(30),
  },
  storeLogo:{
    width:scaleSize(31),
    height:scaleSize(31),
    marginTop: scaleSize(-6)
  },
  storeName:{
    color:"#cfa972",
    fontSize: scaleSize(30),
    paddingLeft: scaleSize(30),
  },
  menuBox:{
    flex:1,
    flexDirection: 'row',
  },
  content:{
    flex: 1,
  },
  userBox:{
      flexDirection: 'row',
      justifyContent: 'space-between',
      width:scaleSize(550)
  },
  userIcon:{
      flexDirection: 'row',
      alignItems: 'center',
  },
  userName:{
      fontSize: scaleSize(20),
      color:"#fff",
      paddingLeft: scaleSize(18),
  },
  logoutBox:{
      flexDirection: 'row',
      alignItems: 'center',
      paddingRight: scaleSize(18),
  },
  logoutIcon:{
      width:scaleSize(40),
      height:scaleSize(40),
  },
  onlineText:{
    fontSize: scaleSize(20),
    color:"#fff",
    paddingRight: scaleSize(18),
  }
});
